<template>
	<el-menu class="el-menu-vertical-demo" :default-openeds="['1']" :collapse="side_hidden" router
		background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
		<template v-for="menu in menus">
			<el-submenu v-if="menu?.children?.length > 0" :index="menu.route_full_path">
				<template slot="title">
					<i :class="`el-icon-${menu.icon_name}`"></i>
					<span slot="title">{{ menu.menu_name }}</span>
				</template>
				<el-menu-item v-for="child in menu.children" :index="child.route_full_path">
					<i :class="`el-icon-${child.icon_name}`"></i>
					<span>{{ child.menu_name }}</span>
				</el-menu-item>
			</el-submenu>
			<el-menu-item v-else :index="menu.route_full_path">
				<i :class="`el-icon-${menu.icon_name}`"></i>
				<span>{{ menu.menu_name }}</span>
			</el-menu-item>
		</template>

	</el-menu>
</template>

<script>
import { Role } from '@/api'
import { mapState, mapActions } from 'vuex';
export default {
	data() {
		return {
			menus: [],
		}
	},
	computed: {
		...mapState(['side_hidden']),
	},
	created() {
		// 角色id
		let role_id = sessionStorage.role_id;
		this.load_role_menu();
		this.load_operation_permission({ role_id, resource_type: 3 });
	},
	methods: {
		// 加载action
		...mapActions('role', ['load_route_permission', 'load_operation_permission']),
		...mapActions('route', ['load_list']),
		...mapActions('menu', ['load_menu_list']),
		...mapActions('operation', ['load_oper_list']),
		// 加载当前角色的菜单权限
		async load_role_menu() {
			// 当前角色id
			let role_id = sessionStorage.role_id;
			let { status, data } = await Role.get_menu({ role_id, type: 'tree', resource_type: 2 });
			if (status) {
				this.menus = data;
				let system_menu = data.find((menu) => menu.permission_code === 'system')
				if (!system_menu) {
					
					this.init_state();
				}
			}
		},
		// 初始化store中的权限state
		init_state() {
			this.load_menu_list();
			this.load_list();
			this.load_oper_list();
			this.load_route_permission();
		}
	}
}
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
	width: 200px;
	min-height: 400px;
}
</style>
